<template>
    <div class="footer">
        <div class="wrap">
            <div
                class="tabWrap"
                v-for="(item,index) in tabData"
                :key="index"
            >
                <img
                    v-if="currentTab == index"
                    :src="item.tabIconCur"
                    alt=""
                >
                <img
                    v-else
                    :src="item.tabIcon"
                    alt=""
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'myfooter',
    props: ['tabIndex'],
    data() {
        return {
            currentTab: this.tabIndex,//当前的tab
            tabData: [{
                tabIcon: '/static/tabIcon/tabIcon-01.png',
                tabIconCur: '/static/tabIcon/tabIcon-cur-01.png',
            }, {
                tabIcon: '/static/tabIcon/tabIcon-02.png',
                tabIconCur: '/static/tabIcon/tabIcon-cur-02.png',
            }, {
                tabIcon: '/static/tabIcon/tabIcon-03.png',
                tabIconCur: '/static/tabIcon/tabIcon-cur-03.png',
            }]
        }
    }
}
</script>
<style lang="less" scoped>
.footer {
    height: 100px;
    width: 100%;
    position: fixed;
    box-sizing: content-box;
    background: #fff;
    bottom: 0;
    z-index:999999;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tabWrap {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            img {
                align-self: center;
                width: 33px; /*no*/
                height: 27px; /*no*/
            }
        }
    }
}
</style>
